<template>
  <div class="workorder-detail">
    <div class="page-header">
      <el-button @click="$router.go(-1)" :icon="ArrowLeft">返回</el-button>
      <h2>工单详情</h2>
    </div>

    <el-card v-if="workOrder" class="detail-card">
      <template #header>
        <div class="card-header">
          <span>工单信息</span>
          <el-tag v-if="workOrder.status === 1" type="info">待分配</el-tag>
          <el-tag v-else-if="workOrder.status === 2" type="warning">进行中</el-tag>
          <el-tag v-else-if="workOrder.status === 3" type="success">已完成</el-tag>
          <el-tag v-else type="danger">已取消</el-tag>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="工单编号">{{ workOrder.work_order_no }}</el-descriptions-item>
        <el-descriptions-item label="工单标题">{{ workOrder.title }}</el-descriptions-item>
        <el-descriptions-item label="工单类别">
          <el-tag v-if="workOrder.category === 1" type="danger">案件委托</el-tag>
          <el-tag v-else type="primary">法务</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="分配状态">
          <el-tag v-if="workOrder.assign_status === 1" type="warning">待分配</el-tag>
          <el-tag v-else-if="workOrder.assign_status === 2" type="success">已分配</el-tag>
          <el-tag v-else type="info">未分配</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDateTime(workOrder.create_time) }}
        </el-descriptions-item>
        <el-descriptions-item label="截止时间">
          {{ workOrder.deadline ? formatDateTime(workOrder.deadline) : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <el-tag v-if="workOrder.priority === 1" type="danger">紧急</el-tag>
          <el-tag v-else-if="workOrder.priority === 2" type="warning">重要</el-tag>
          <el-tag v-else type="info">普通</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="当前处理人">
          {{ workOrder.assignee_name || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="工单描述" :span="2">
          {{ workOrder.description || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 进度记录 -->
    <el-card class="progress-card">
      <template #header>
        <span>进度记录</span>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="(progress, index) in progressList"
          :key="index"
          :timestamp="formatDateTime(progress.create_time)"
          :type="progress.type"
        >
          <div class="progress-content">
            <div class="progress-title">{{ progress.title }}</div>
            <div class="progress-description">{{ progress.description }}</div>
            <div class="progress-operator">操作人：{{ progress.operator_name }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ArrowLeft } from '@element-plus/icons-vue'

  // 类型定义
  interface WorkOrder {
    work_order_no: string
    title: string
    category: number
    status: number
    assign_status: number
    create_time: number
    deadline?: number
    priority: number
    assignee_name?: string
    description?: string
  }

  interface Progress {
    title: string
    description: string
    operator_name: string
    create_time: number
    type: string
  }

  const props = defineProps<{
    id: string
  }>()

  const workOrder = ref<WorkOrder | null>(null)
  const progressList = ref<Progress[]>([])

  onMounted(() => {
    fetchWorkOrderDetail()
    fetchProgressList()
  })

  const fetchWorkOrderDetail = async () => {
    try {
      const request = (await import('@/utils/request')).default
      const res = await request({
        url: `/api/workorder/workOrder/detail/${props.id}`,
        method: 'get',
      })
      if (res.data.code === 0) {
        workOrder.value = res.data
      }
    } catch (error) {
      console.error(error)
    }
  }

  const fetchProgressList = async () => {
    try {
      const request = (await import('@/utils/request')).default
      const res = await request({
        url: `/api/workorder/workOrder/progress/${props.id}`,
        method: 'get',
      })
      if (res.data.code === 0) {
        progressList.value = res.data.list || []
      }
    } catch (error) {
      console.error(error)
    }
  }

  const formatDateTime = (timestamp: number) => {
    if (!timestamp) return ''
    const date = new Date(timestamp * 1000)
    return date.toLocaleString()
  }
</script>

<style lang="scss" scoped>
  .workorder-detail {
    padding: 20px;

    .page-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;

      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
      }
    }

    .detail-card {
      margin-bottom: 20px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .progress-card {
      .progress-content {
        .progress-title {
          font-weight: 500;
          margin-bottom: 5px;
        }

        .progress-description {
          color: #666;
          margin-bottom: 5px;
        }

        .progress-operator {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
</style>
